<template>
  <div id="app">
    <div class="pl-5 header bg-white h-[50px]">Vue Web Serial API 串口通信</div>
    <div class="main">
		<SerialManager @status-change="handleStatusChange"/>
		<SerialTerminal :isOpen="isOpen"/>
	</div>
	
	
  </div>
</template>

<script setup>
import { provide, ref } from 'vue';
import SerialManager from './components/SerialManager.vue';
import SerialTerminal from './components/SerialTerminal.vue';
import mydialog from './components/mydialog.vue'

// 在根组件提供 isOpen 状态，供子组件注入
const isOpen = ref(false);


// 监听子组件的操作，更新 isOpen（通过事件或直接反写）
const handleStatusChange = (flag) =>{
	isOpen.value = flag.value
}

// 这里用 provide/inject 简化示例，当 SerialManager 打开或关闭时，
// 可手动同步 isOpen（也可使用状态管理方案）
</script>

<style>
body {
  font-family: Arial, sans-serif;
}
.header{
	font-weight: bold;
	font-size:18px;
	line-height: 50px;
}
.main{
	margin:100px auto;
	padding:5px 10px;
	width:500px;
	height:500px;
	background-color:white;
	box-shadow: 1px 1px 2px gray;
	border-radius: 10px;
}

.main:hover{
	box-shadow: 1px 1px 5px gray;
}

</style>